<template>
  <q-card class="weather-card">
    <q-card-section>
      <div class="weather-platform-title">行进线路天气状况</div>
    </q-card-section>
    <q-separator />
    <q-list bordered v-for="item in weatherList" :key="item.id">
      <q-expansion-item expand-separator :label="item.dateTime + '[经度' + item.lon + ',纬度' + item.lat + ']'" class="weather-title">
        <div class="weather-rounded-borders">
          <div class="row">
            <div class="name-field text-center">
              <q-icon name="img:img/map/wd.png" size="xs" class="q-mr-xs" />温度
            </div>
            <div class="col text-center">{{ item.minTemperature }}~{{ item.maxTemperature }}</div>
          </div>
          <div class="row">
            <div class="name-field text-center">
              <q-icon name="img:img/map/lx.png" size="xs" class="q-mr-xs" />风向
            </div>
            <div class="col text-center">{{ item.windMark }}</div>
          </div>
          <div class="row">
            <div class="name-field text-center">
              <q-icon name="img:img/map/ls.png" size="xs" class="q-mr-xs" />降雨概率 %
            </div>
            <div class="col text-center">{{ item.probability }}%</div>
          </div>
          <div class="row">
            <div class="name-field text-center">
              <q-icon name="img:img/map/lg.png" size="xs" class="q-mr-xs" />能见度
            </div>
            <div class="col text-center">{{ item.visibility }}</div>
          </div>
          <div class="row">
            <div class="name-field text-center">
              <q-icon name="img:img/map/lg.png" size="xs" class="q-mr-xs" />风速
            </div>
            <div class="col text-center">{{ item.windSpeed }}</div>
          </div>
        </div>
      </q-expansion-item>

    </q-list>
  </q-card>
</template>

<script>
export default {
  components: {},
  props: {
  },
  data() {
    return {
      weather: {
        cityName: 'Changli', // 城市名
        lon: '119.3169', // 经度
        lat: '39.5977', // 纬度
        dateTime: '2023-06-01 11:25', // 数据更新时刻
        pod: 'd', // 白天还是夜晚 d：白天 n：夜晚
        visibility: 16, // 能见度 km
        weatherDescription: '晴天', // 天气现象
        weatherCode: 1031, // 天气代码 参考【海洋天气对照表】菜单
        clouds: 0, // 云层量 %
        pressure: 999, // 气压 mb
        precipitation: 0, // 降雨量 mm/hr
        snow: 0, // 降雪量 mm/hr
        temperature: 28.8, // 温度 摄氏度℃
        appTemp: 27.5, // 体感温度 摄氏度℃
        ultravioletRays: 10.604384, // 紫外线指数 范围0-11
        rHumidity: 27, // 相对湿度 %
        windDirection: 244, // 风向角度度数
        windSpeed: 6.4601865, // 风速 m/s
        windMark: '西南西南', // 风向描述
      },
      weatherList: [],
    };
  },
  watch: {},
  computed: {},
  methods: {

    initWeatherList() {
      this.$axios.get('/wea/predictRoute/sevenDayWeather', {
        params: {
          id: this.$route.query.id
        }
      }).then(({ result }) => {
        this.weatherList = result;
      });
    },
  },
  created() { },
  mounted() { this.initWeatherList(); },
};
</script>
<style lang="stylus">
.weather-card
  width 370px
  .weather-title
    background-color #c5e6f9
    color #5f5f5f
    font-size 14px
    font-weight 700
    line-height normal
    margin-bottom 1px
  .weather-rounded-borders
    .name-field
      width 160px
      display block
      span
        width 20px
    div
      height 58px
      line-height 58px
      background-color #f9f9f9
      font-size 14px
      color #5f5f5f
    div:nth-child(odd)
      div:first-child
        background-color #e9f8ff
    div:nth-child(even)
      div:nth-child(2)
        background-color #e9f8ff
</style>
